<template>
    <div>
      <div>
        <el-row>
          <el-col :offset="18" :span="3">
            <el-input  placeholder="请输入车牌号" style="font-size: 1px" v-model="carNum" size="mini"/>
          </el-col>
          <el-col :offset="1" :span="1" >
            <el-button type="primary" @click="queryParam" size="mini" >
              查询
            </el-button>
          </el-col>
        </el-row>
      </div>

      <el-amap vid="amapContainer"
               :amap-manager="amapManager"
               :center="center"
               :zoom="zoom"
               :events="events"
               style="margin-top: 20px"
               class="amap-wrap">
        <!--  覆盖物   自身位置(总部)  -->
        <el-amap-circle v-for="circle in circles"
                        :center="circle.center"
                        :radius="circle.radius"
                        :fill-opacity="circle.fillOpacity"
                        :key="circle.id"
                        >
        </el-amap-circle>

        <!--  覆盖物   司机位置-->
        <el-amap-marker v-for="(driver, index) in drivers"
                        :position="driver.now"
                        :key="driver.id + 100"
                        :offset="driver.offset"
                        :content="driver.content"
                        :label="driver.label"
                        :events="driverEvents"
                        :vid="index"
                        :extData="driver"
        >

        </el-amap-marker>

      </el-amap>
    </div>
</template>

<script>
  import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
  let amapManager = new AMapManager();
  let driving = null;

  export default {
    name: "Amap",
    data() {
      const _this = this;
      return {
        map: null,
        zoom: 18,
        amapManager,
        center:[104.701153,31.53683],
        carNum: '',
        circles: [
          {
            id: '1',
            center: [0, 0],
            radius: 10,
            fillOpacity: 0.5,
          },
        ],
        // 司机数据
        drivers: [
          {
            id: 1,
            //content: "'<img src='" + require('@/assets/img/car/车辆故障.png') + "' style='width: 50px'/>'",
            now: [104.701153,31.53683],
            offset: [-30, -40],
            label: {
              content: '王大村',
              offset: [5, -15]
            },
            end: [104.731153,31.53683],

          },

          {
            id: 2,
            //content: "'<img src='" + require('@/assets/img/car/货车.png') + "' style='width: 50px'/>'",
            now: [104.711153,31.53683],
            offset: [-30, -40],
            label: {
              content: '李小二',
              offset: [5, -15]
            },
            end: [104.731153,31.53683],
          },

          {
            id: 3,
            //content: "'<img src='" + require('@/assets/img/car/货车.png') + "' style='width: 50px'/>'",
            now: [104.701013,31.53683],
            offset: [-30, -40],
            label: {
              content: '张五路',
              offset: [5, -15]
            },
            end: [103.571696,28.262683],
          },
        ],
        events: {
          // 初始化自己位置
          init() {
            lazyAMapApiLoaderInstance.load().then(() => {
              _this.initMap()
            })
          }
        },
        driverEvents: {
          // 获取目的地的位置
          click: (val) => {
            console.log(val)
            // 获取这个司机的全部数据
            console.log(val.target.getExtData())
            //构造路线导航类
            if (!driving) {
              driving = new AMap.Driving({
                map: this.map
              });
            }

            // 根据起终点经纬度规划驾车导航路线
            driving.search(val.target.getExtData().now, val.target.getExtData().end, function(status, result) {
              // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
              if (status === 'complete') {
                console.log('绘制驾车路线完成')
                console.log(result)
              } else {
                console.log('获取驾车数据失败：' + result)
              }
            });
          }


        }
      }
    },
    methods: {

      queryParam() {
        if(this.carNum === '1') {
          this.center = [104.701013,31.53683]
        }
      },



      initMap() {

        // 获取地图实例
        this.map = amapManager.getMap()
/*        let marker = new AMap.Marker({
          // position: this.center,
        });
        marker.setMap(this.map)*/


        /**
         * 浏览器定位
         */
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：5s
          buttonPosition:'RB',    //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
          markerOptions: {
            content: ''    // TODO:这里设置为总部图片
          }

        });
        this.map.addControl(geolocation);
        geolocation.getCurrentPosition((status,result) => {
          if(status == 'complete'){
            const lng = result.position.lng
            const lat = result.position.lat
            this.circles[0].center = [lng,lat]
          }else{

          }
        });
      }
    },
    mounted() {

    }

  }
</script>

<style scoped>
 .amap-wrap {
   height: 84vh;

 }
</style>